<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>
<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap-table.css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
<script	type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script	type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap-table.js"></script>
<script	type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/locale/bootstrap-table-zh-CN.js"></script>
</head>
<script>
	$(function(){
		$.ajax({
			url:"${pageContext.request.contextPath}/QueryRole",
			dataType:"json",
			type:"post",
			
			success:function(data){
				for(var i in data){
					$("#roleName").append("<option value='"+data[i].id+"'>"+data[i].roleName+"</option>")
				}
			}
		})	
		$("#table").bootstrapTable({
			url:"${pageContext.request.contextPath}/UserList",
			toolbar:"#toolbar",
			method:"post",
			dataType:"json",
			sidePagination:"server",
			pagination : true,//设置为 true 会在表格底部显示分页条
			paginationLoop : true,//设置为 true 启用分页条无限循环的功能。
			pageNumber:1,
			pageSize:5,
			pageList:[ 5, 10, 15],
			contentType:"application/x-www-form-urlencoded",
			queryParamsType : "",
			//请求服务器数据
			queryParams : queryParams,
			columns:[
				{
					checkbox:true
				},
				{
					field:"id",
					title:"编号",
					align:"center"
				},
				{
					field:"loginName",
					title:"用户名",
					align:"center"
				},
				{
					field:"loginPassword",
					title:"用户密码",
					align:"center"
				},
				{
					field:"roleName",
					title:"角色名",
					align:"center"
				}
			]
		})
		
	})
	function queryParams(params){
		var likeName=$("#name").val();
		var likeRole=$("#roleName").val();
		var param={
			pageNumber:params.pageNumber-1,
			pageSize:params.pageSize,
			likeName:likeName,
			likeRole:likeRole
		}
		return param;
	}
	function refresh(){
		var likeName=$("#name").val();
		var likeRole=$("#roleName").val();
		$.ajax({
			url:"${pageContext.request.contextPath}/UserList",
			dataType:"json",
			type:"post",
			data:{
				likeName:likeName,
				likeRole:likeRole
			},
			 success:function(data){
				$("#table").bootstrapTable("refresh");
			}  
		})	
	}
	function Upd(){
		var row=$("#table").bootstrapTable('getSelections');
		if(row[0]==null){
			alert("请选中一行进行修改");
		}else{
				$("[name='loginName']").val(row[0].loginName);
				$("[name='id']").val(row[0].id)
				$("[name='loginPassword']").val(row[0].loginPassword)
		}
       
	}
	function upd(){
		var id=$("[name='id']").val();
		var loginName=$("[name='loginName']").val();
		var loginPassword=$("[name='loginPassword']").val();
		 	$.ajax({
				url:"${pageContext.request.contextPath}/UpdateUser",
				dataType:"json",
				type:"post",
				data:{
					id:id,
					loginPassword:loginPassword,
					loginName:loginName
				},
				success:function(data){
					if(data){
						alert("修改成功");
						$("#table").bootstrapTable("refresh");
					}else{
						alert("修改失败");
					}
				}
			})	
	}
</script>
<style>
	#modalP{
		padding:10px;
		width:500px;
		height:55px;
		margin:0 auto;
		line-height:55px;
		font-size:15px;
	}
	#modalP>input{
		width:300px;
		height:30px;
	}
	.modalSpan{
		display:inline-block;
		width:100px;
		height:30px;
		line-height:30px;
		text-align:right;
	}
</style>
<body>
<div class="col-sm-12 col-md-12">
		<div class="main-container">
		<div class="panel panel-default" style="margin: 0;padding: 0">
			<div class="panel-heading">搜索</div>
			<div class="panel-body">
				<form role="form" class="form-inline">
					<div class="form-group">用户名：</div>
					<input id="name" type="text" class="form-control input-sm"
						placeholder=""> &nbsp;
					<div class="form-group">角色:</div>
					<select id="roleName" class="form-control input-sm">
						<option value="">-请选择角色名-</option>
					</select>
					<div class="form-group">
						<button class="btn btn-reset glyphicon glyphicon-search"
							type="button" onclick="reset()">清空</button>
					</div>
					<div class="form-group">
						<button class="btn btn-success glyphicon glyphicon-search"
							type="button" onclick="refresh()">搜索</button>
					</div>
				</form>
					</div>
		</div>
			<div id="toolbar">
				<button class="btn btn-info btn-gt glyphicon glyphicon glyphicon-circle-arrow-up" data-toggle="modal"  data-target="#update" onclick="Upd()">修改</button>
				<button class="btn btn-success btn-gt glyphicon glyphicon-asterisk" onclick="del()">删除</button>
				<button class="btn btn-success btn-gt glyphicon glyphicon glyphicon-share-alt" onclick="del()">导出</button>
			</div>
			<table id="table" ></table>
				<!--修改模态框  -->
			<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
			            </div>
			            <div class="modal-body">
			            	<p id="modalP">
			            		<span class="modalSpan">编号:</span>
			            		<input type="text" name="id" readonly="readonly" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">用户名:</span>
			            		<input type="text" name="loginName" readonly="readonly" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">登录密码：</span>
			            		<input type="text" name="loginPassword"/>
			            	</p>
			            </div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
			                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="upd()">提交</button>
			            </div>
			        </div>
			    </div>
			</div>
		</div>
	</div>
</body>
</html>